function drawBarEx(id, data, names, title){
    var dts = [];
    data.forEach(function(lines, i){
        lines.value.forEach(function(d, j){
            if(i==0)dts.push({
                name: names[j],
                type: 'bar',
                barGap: 0,
                data: []
            });
            dts[j].data.push(d);
        });
    });
    var xs = data.map(function(d){ return d.name; });
    var series = dts;
    
    Init3(option, id);
}


function drawMark(id, data, names, title){
    var maxV = data[2].value[2] * 1.25; 
//    var dLine1 = [data[0].value[0], data[0].value[1]];
//    var dLine2 = [data[0].value[0], data[0].value[1]];
//    for(var i=2; i<names.length; i++){ dLine1.push(0); dLine2.push(0); }
//    dLine1.push(data[0].value[2]);
//    dLine2.push(data[2].value[2]);
    var option = {
        backgroundColor: '',
        title: {
            text: title,
            left:'center',
            textStyle: {
                 color: '#ccc',
                fontSize: 12
            }
        },
        grid:{left:40, top:15},
        xAxis: {
            data: names,
            axisLine: {
                lineStyle: {
                    color: '#0177d4'
                }
            },
            axisLabel: {
                color: '#ccc',
                interval:1,
                fontSize: 12,
                rotate:45
            }
        },
        yAxis: {
            name: "单位：万元",
            nameTextStyle: {
                color: '#ccc',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: '#0177d4'
                }
            },
            axisLabel: {
                color: '#ccc',
                fontSize: 12,
                formatter: function(p){ return p/10000; }
            },
            splitLine: {
                show:false,
                lineStyle: {
                    color: '#0177d4'
                }
            },
            max:maxV
        },
        series: [{
            type: 'bar',
            data: [0],
            markPoint: { symbol: 'pin', symbolSize: 12, itemStyle:{color:'red'}, data:[
                { value:data[3].name + (data[3].value[0]/10000).toFixed(2), label:{
                    position:'right', color:'red',
                    offset:[5, 0], show:true}, coord:[1, data[3].value[0]] }
            ] },
            markLine: {
                lineStyle:{color:'#EE9A49'},
                data:[
                    [{symbolSize:1, coord:[0, data[1].value[0]]}, {coord:[names.length - 1, data[1].value[0]], label: { 
                        normal: { position: 'middle', formatter: data[1].name + data[1].value[0]/10000, color:'#EE9A49' }
                    }}],
                    
                    [{symbolSize:1, lineStyle:{color:'#66CD00'}, coord:[0, data[0].value[0]]}, {symbolSize:1, coord:[1, data[0].value[1]]}], 
                    [{symbolSize:1, lineStyle:{color:'#66CD00'}, coord:[1, data[0].value[0]]}, {symbolSize:1, coord:[names.length - 1, data[0].value[2]]}],
                    //// 隐藏
                    [{symbolSize:1, lineStyle:{width:0}, coord:[4, data[0].value[0]]}, {symbolSize:1, coord:[names.length - 1, data[1].value[0] * 0.85], label: {
                            normal: { position: 'middle', offset:[50, 0], formatter: data[0].name, color:'#66CD00' }
                    }}],
                    
                    [{symbolSize:1, lineStyle:{color:'#5CACEE'}, coord:[0, data[2].value[0]]}, {symbolSize:1, coord:[1, data[2].value[1]]}], 
                    [{symbolSize:1, lineStyle:{color:'#5CACEE'}, coord:[1, data[2].value[0]]}, {symbolSize:1, coord:[names.length - 1, data[2].value[2]], label: {
                            normal: { position: 'middle', formatter: data[2].name, color:'#5CACEE' }
                        }
                    }],
                ],
                
            }
        }]
    };
    
    cout(option);
    Init3(option, id);
}



    function draw1(id, data, title){
        var names = data.map(function(d){ return d[0]; });
        var values = [parseFloat(data[0][1]), parseFloat(data[1][1])];
        var option = {
            title: {
                text: '特性示例：渐变色 阴影 点击缩放',
                subtext: 'Feat'
            },
            xAxis: {
                data: names,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            grid:{ right:'30%' },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: [values[0], values[0]],
                    barWidth: '20%',
                    stack:true
                },
                {
                    type: 'bar',
                    data: [0, values[1] - values[0]],
                    barWidth:'20%',
                    stack:true,
                }
            ]
        };
        
        var e = Init3(option, id);
        // opt = e.getOption();
        //-----------------------------------------------------------
        // convertToPixel可得到柱子的坐标位置，但x位置在柱子中央
        // 故需要求出柱子的宽度，向右偏移一半柱宽
        // 考虑到设备尺寸不确定，柱子宽度需要设置百分比，记录此值
        // 柱子宽度 = (总宽度 - 左间距 - 右间距) / 柱子数目 * 柱子宽度百分比
        //      总宽度 ： getWidth()
        //      左右间距 ： 似乎默认都是10%，可getOption()，在grid里
        //-----------------------------------------------------------
        var mainWidth = e.getWidth() * (100 - 10 - 10)/100;
        var barWidth = mainWidth / 2 * 0.3;
        var lenLine = 60; 
                
        var pb = e.convertToPixel({seriesIndex:0}, [1, 200]);
        var pt = e.convertToPixel({seriesIndex:0}, [1, 300]);
        pb[0] += barWidth / 2;
        pt[0] += barWidth / 2;
        
        var markLine = { data:[ 
            [{symbolSize:1, x:pt[0], y:pt[1]}, {symbolSize:1, x:pt[0] + lenLine, y:pt[1]}],
            [{symbolSize:1, x:pt[0] + lenLine, y:pt[1]}, {symbolSize:1, x:pb[0] + lenLine, y:pb[1]}],
            [{symbolSize:1, x:pb[0], y:pb[1]}, {symbolSize:1, x:pb[0] + lenLine, y:pb[1]}]
        ] };
        var label = {
            show:true,
            offset:[lenLine, 0],
            position:'right',
            formatter:function(p){
                return "{a|}\n{b|上升了"+ 10 + "}";
            },
            rich:{
                a:{
                    backgroundColor: {
                        image: 'http://www.iconpng.com/png/cristal-intense/fleche-haut-rouge.png'
                    },
                    height: 30
                },
                b:{
                    color: 'red',
                    lineHeight: 14
                }
            }
        };
        var markPoint = { data:[
            { value:values[0] + values[1] , label:{show:true}, x:pt[0] - barWidth / 2, y:pt[1] }
        ] };
        
        option.series[1]['markLine'] = markLine;
        option.series[0]['markPoint'] = markPoint;
        option.series[1].data[1] = {
            label: label,
            value: option.series[1].data[1]
        }
        e.setOption(option);
        cout(option);
    }

function drawBarB(id, data, title){
    var names = data.map(function(d){ return d[0]; });
    var values = [data[0][1], data[1][1]];
    var option = {
        backgroundColor: '',
        title: {
            text: title,
            left:'center',
            textStyle: {
                 color: '#ccc',
                fontSize: 12
            }
        },
        grid: {
            left: '3%',
            right: '15%',
            bottom: '10%',
            containLabel: true
        },
        tooltip: {
            show: "true",
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        yAxis: {
            name:'单位：万元',
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ccc',
                }
            },
            axisLabel:{
                formatter: function(p){ return p/10000; }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#aaa',
                }
            },
        },
        xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ccc',
                    }
                },
                data: names
            }
        ],
        series: [
                {
                    type: 'bar',
                    data: [values[0], values[0]],
                    stack:true,
                    itemStyle: {
                        normal: {
                            show: true,
                            color: '#277ace',
                            barBorderRadius: 0,
                            borderWidth: 0,
                            borderColor: '#333',
                        }
                    },
                },
                {
                    type: 'bar',
                    data:[0, values[1] - values[0]],
                    barWidth:'30%',
                    stack:true,
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3023AE'
                            }, {
                                offset: 1,
                                color: '#C96DD8'
                            }]),
                            barBorderRadius: 0,
                            borderWidth: 0,
                            borderColor: '#333',
                        }
                    },
                }
            ]
    };
    
    var e = Init3(option, id);
        // opt = e.getOption();
        //-----------------------------------------------------------
        // convertToPixel可得到柱子的坐标位置，但x位置在柱子中央
        // 故需要求出柱子的宽度，向右偏移一半柱宽
        // 考虑到设备尺寸不确定，柱子宽度需要设置百分比，记录此值
        // 柱子宽度 = (总宽度 - 左间距 - 右间距) / 柱子数目 * 柱子宽度百分比
        //      总宽度 ： getWidth()
        //      左右间距 ： 似乎默认都是10%，可getOption()，在grid里
        //-----------------------------------------------------------
        var mainWidth = e.getWidth() * (100 - 10 - 10)/100;
        var barWidth = mainWidth / 2 * 0.3;
        var lenLine = 30; 
                
        var pb = e.convertToPixel({seriesIndex:0}, [1, values[0]]);
        var pt = e.convertToPixel({seriesIndex:0}, [1, values[1]]);
        pb[0] += barWidth / 2;
        pt[0] += barWidth / 2;
        
        var markLine = { data:[ 
            [{symbolSize:1, x:pt[0], y:pt[1]}, {symbolSize:1, x:pt[0] + lenLine, y:pt[1]}],
            [{symbolSize:1, x:pt[0] + lenLine, y:pt[1]}, {symbolSize:1, x:pb[0] + lenLine, y:pb[1]}],
            [{symbolSize:1, x:pb[0], y:pb[1]}, {symbolSize:1, x:pb[0] + lenLine, y:pb[1]}]
        ] };
        var label = {
            show:true,
            offset:[lenLine, 0],
            position:'right',
            formatter:function(p){
                return "{a|}\n{b|上升\n"+ (values[1] - values[0]) + "}";
            },
            rich:{
                a:{
                    backgroundColor: {
                        image: '../imgs/arrow0.jpg'
                    },
                    height: 30
                },
                b:{
                    color: 'red',
                    lineHeight: 14
                }
            }
        };
        var markPoint = { data:[
            { value:(values[1]/10000).toFixed(2), symbolSize:15, label:{show:true}, x:pt[0] - barWidth / 2, y:pt[1] }
        ] };
        var markPoint2 = { data:[
            { value:(values[0]/10000).toFixed(2), symbolSize:15, label:{show:true}, coord:[0, values[0]]}
             //x:pt[0] - barWidth / 2, y:pt[1] }
        ] };
        cout(markPoint);
        option.series[1]['markLine'] = markLine;
        option.series[1]['markPoint'] = markPoint;
        option.series[0]['markPoint'] = markPoint2;
        option.series[1].data[1] = {
            label: label,
            value: option.series[1].data[1]
        }
        e.setOption(option);
}

function drawBars(id, data, names, title){
    var dts = [];
    data.forEach(function(lines, i){
        lines.value.forEach(function(d, j){
            if(i==0)dts.push({
                name: names[j],
                type: 'bar',
                barGap: 0,
                data: []
            });
            dts[j].data.push(d);
        });
    });
    var xs = data.map(function(d){ return d.name; });
    var series = dts;
    var option = {
        title: {
            text: title,
            left:'center',
            top:0,
            textStyle: {
                 color: '#ccc',
                fontSize: 12
            }
        },
        backgroundColor: '',
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid:{ left:35, right:20, top:40 },
        legend: { data: names, top:15 },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: xs,
                axisLabel: {
                    color: '#ccc',
                    fontSize: 12,
                    interval: 0,
                    rotate:45
                }
            }
        ],
        yAxis: [{ type: 'value'} ],
        series: series
    };
    
    Init3(option, id);
}



function drawRose(id, data, title){
    var values = data.map(function(d){ return {name: d[0],value: d[1].replace(/,/g, '') }; });
    var minV = values[0].value;
    var maxV = values.reduce(function(a, b){
        if(minV>b.value)minV = b.value;
        return a>b.value?a:b.value; 
    }, 0);
    cout(minV);
    var option = {
        backgroundColor: '',
        color:["#f845f1", "#ad46f3", "#5045f6", "#4777f5", "#44aff0", "#45dbf7", "#f6d54a", "#f69846", "#ff4343"],
        title: {
            text: title,
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc',
                fontSize: 12
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} <br/> {c} ({d}%)"
        },
        visualMap: {
            show: false,
            min: minV,
            max: maxV,
            inRange: {
                colorLightness: [0.35, 0.75]
            }
        },
        series : [
            {
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:values.sort(function (a, b) { return a.value - b.value}),
                roseType: 'angle',
                label: {
                    normal: {
                        formatter: "{b}\n{c}\n{d}%",
                        textStyle: {
                            fontSize:11,
                            color: 'rgba(255, 255, 255, 0.98)'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
//                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    Init3(option, id);
}


function drawMap(id, data, title){
    var values = data.map(function(d){ return {name: d[0],value: parseInt(d[1].replace(/,/g, '')) }; });
    var minV = values[0].value;
    var maxV = values.reduce(function(a, b){
        if(minV>b.value)minV = b.value;
        return a>b.value?a:b.value; 
    }, 0);
    var option = {
        backgroundColor: '',
        title: {
            text: title,
//            subtext: '地域分布图',
            left: 'center',
            textStyle:{fontSize:16}
        },
        tooltip: {
            trigger: 'item'
        },
//        grid:{bottom:'10%'},
        legend: {
            orient: 'vertical',
            left: 'left',
            data:['2017年']
        },
        visualMap: {
            min: minV,
            max: maxV,
//            orient:'horizontal',
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true,
            inRange: {
                    color: [ '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                },
            textStyle:{color:"#fff"}
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: true
                }
            },
            roam: false, //是否允许缩放
            layoutCenter: ['50%', '50%'], //地图位置
            layoutSize: "95%",
            itemStyle: {
                normal: {
                    color: 'rgba(51, 69, 89, .5)', //地图背景色
                    borderColor: 'rgba(100,149,237,1)' //省市边界线
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: [
            {
                name: '',
                type: 'map',
                roam: false,
                geoIndex:0,
                data:values,
                itemStyle: {
                normal: {
                    label:{show:true, color: '#fff', formatter:"12{c}"}
                }}

            },


        ]
    };
    cout(option);
    Init3(option, id);
}

function drawLine(id, data, title){
    var colors = ['#5793f3', '#d14a61', '#675bba'];
    var names = data.map(function(d){ return d[0]; });
    var values = data.map(function(d){ return d[1]; });
    
    var option = {
        // color: colors,
        backgroundColor:'',
        "title": {
            "text": title,
            "left": "left",
            "top": 10,
            "textStyle": {
                fontSize: 12,
                color: '#ccc'
            }
        },
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    color: '#ccc',
                    fontSize: 12,
                    interval: 0,
                    rotate:45
                },
                data: names
            }
        ],
        yAxis: [{
                'name':'单位：万元', nameTextStyle:{ fontSize:11 },
                type: 'value'
        }],
        series: [{
            symbol: smb_circle,
            symbolSize: 32,
            type: "line",
            smooth: true,
            data: values,
            label:{ show:true, fontSize:10},
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    color: {
                        colorStops: [{
                                offset: 0,
                                color: '#821eff'
                            },

                            {
                                offset: 1,
                                color: '#204fff'
                            }
                        ],
                    }
                }
            }
        }]
    };
    
    Init3(option, id);
}

   function drawBar(id){
        var names = [];
        var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(function(d){
            names.push(d + "月");
            return parseInt(Math.random() * 5000);
        });
        var option = {
            backgroundColor: 'rgb(43, 51, 59)',
            xAxis: {
                data: names,
                axisLine: {
                    lineStyle: {
                        color: '#0177d4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 14,
                    interval: 0,
                    rotate:45
                }
            },
            yAxis: {
                name: "（人）",
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 16
                },
                axisLine: {
                    lineStyle: {
                        color: '#0177d4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 16
                },
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: '#0177d4'
                    }
                },
                max:7000

            },
            series: [{
                type: 'bar',
                barWidth: 18,
                itemStyle:{
                    normal:{
                        color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00b0ff'
                        }, {
                            offset: 0.8,
                            color: '#7052f4'
                        }], false)
                    }
                },
                data: data
            }]
        };

        Init3(option ,id);
    }

    function drawPie(id, title){
        var count = Math.random() * 5 + 5, data = [];
        var colors = ["#f845f1", "#ad46f3", "#5045f6", "#4777f5", "#44aff0", "#45dbf7", "#f6d54a", "#f69846", "#ff4343"];
        for(var i=0; i<count; i++){
            data.push({
                name:"维度" + (i + 1), value:(Math.random() * 50000 + 50000).toFixed(2), "itemStyle":
                { "normal": { "color": colors[i] } }
            });
        }
        data.sort(function(a, b){ return a.value - b.value; });
        for(var i=0; i<count; i++){
            data.push({
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            });
        }
        var names = data.map(function(d){ return d.name; });
        var option = {
            backgroundColor: 'rgb(43, 51, 59)',
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            "tooltip": {
                "trigger": "item",
                "formatter": "{a}<br/>{b}:{c}元"
            },
            "title": {
                "text": title + " 数据统计图",
                "left": "center",
                "top": 20,
                "textStyle": {
                    "color": "#ccc"
                }
            },
            "calculable": true,
            "legend": {
                "icon": "circle",
                "x": "center",
                "y": "15%",
                "data": names,
                "textStyle": {
                    "color": "#fff"
                }
            },
            "series": [{
                "name": "XX线索",
                "type": "pie",
                "radius": [
                    37,
                    155
                ],
                "avoidLabelOverlap": false,
                "startAngle": 0,
                "endAngle": 90,
                "center": [
                    "50.1%",
                    "34%"
                ],
                "roseType": "area",
                "selectedMode": "single",
                "label": {
                    "normal": {
                        "show": true,
                        "formatter": "{c}元"
                    },
                    "emphasis": {
                        "show": true
                    }
                },
                "labelLine": {
                    "normal": {
                        "show": true,
                        "smooth": false,
                        "length": 20,
                        "length2": 10
                    },
                    "emphasis": {
                        "show": true
                    }
                },
                "data": data
            }]
        };
        Init3(option, id);
    }
